<template>
    <div class="wrapper" ref="scrollWrapper" :style="{top:top + 'px'}">
        <slot name="scroll"></slot>
        <div class="loading-wrapper">
            <p v-show="nomore">----  没有更多数据啦  ----</p>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    props:{
        data:{
            type:Array,
            default:null
        },
        nomore:{
            type:Boolean,
            default:false
        },
        top:{
            type:String,
            default:'0'
        }
    },
    mounted(){
        this.$nextTick(() => {
            //dom更新了 可以调用better-scroll了
            this.initScroll();
        })
    },
    methods:{
        initScroll(){
            if(this.bScroll){
                this.bScroll.refresh();
                console.log('has scroll')
            }else{
                this.bScroll = new BScroll(this.$refs.scrollWrapper,{
                probeType:1,
                click:true
                });
            }
            this.bScroll.on('scroll',(pos)=>{
                this.scrollY = Math.abs(Math.round(pos.y));
                //console.log("====scrollY" + this.scrollY)
            });
            this.bScroll.on('touchend', (pos) => {
                // 下拉动作
                if (pos.y > 50) {
                //console.log('xiala')
                }
            });
            this.bScroll.on('scrollEnd', () => {
                // 滚动到底部
                if (this.bScroll.y <= (this.bScroll.maxScrollY + 50)) {
                this.$emit('load');
                console.log('jjj')
                }
            })
        },
        
        refresh() {
            // 代理better-scroll的refresh方法
            this.bScroll && this.bScroll.refresh()
        },
    },
    watch: {
        // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
        data() {
            setTimeout(() => {
                this.refresh()
            }, this.refreshDelay)
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper
    width:100%
    position:fixed
    left:0
    bottom 50px
    padding-bottom 20px
    .loading-wrapper
        text-align:center
        height:20px
        width:100%
        position:absolute
        left:0
        bottom:0px
        p
            width:100%
            line-height:20px
            font-size:12px
            color:#888
</style>